<template>
    <div>
        <table class="wq text-center" border="0" cellpadding="0" cellspacing="1">
            <tr class="t_list_caption">
                <td>种类</td>
                <td>赔率</td>
            </tr>
            <tr class="t_td_text">
                <td class="caption_1">{{typetit}}</td>
                <td class="colorRed bolds odds">{{odds}}</td>
            </tr>
        </table>
        <table class="wq text-center" border="0" cellpadding="0" cellspacing="1">
            <tr class="t_list_caption">
                <td width="8%">生肖</td>
                <td>号码</td>
                <td>选号</td>
                <td width="8%">生肖</td>
                <td>号码</td>
                <td>选号</td>
            </tr>
            <tr class="t_td_text">
                <td class="caption_1">鼠</td>
                <td><span class="greenBalls">11</span><span class="redBalls">23</span><span class="redBalls">35</span><span class="blueBalls">47</span></td>
                <td><label class="flexbox"><input type="checkbox" name="checkboxtype" style="margin:5px auto;" v-model="moneydata['鼠']" @change="checkboxChange" :disabled="continuousData.betArr.length > 10 && !moneydata['鼠']"></label></td>
                <td class="caption_1">马</td>
                <td><span class="greenBalls">05</span><span class="greenBalls">17</span><span class="redBalls">29</span><span class="blueBalls">41</span></td>
                <td><label class="flexbox"><input type="checkbox" name="checkboxtype" style="margin:5px auto;" v-model="moneydata['马']" @change="checkboxChange" :disabled="continuousData.betArr.length > 10 && !moneydata['马']"></label></td>
            </tr>
            <tr class="t_td_text">
                <td class="caption_1">牛</td>
                <td><span class="blueBalls">10</span><span class="greenBalls">22</span><span class="redBalls">34</span><span class="redBalls">46</span></td>
                <td><label class="flexbox"><input type="checkbox" name="checkboxtype" style="margin:5px auto;" v-model="moneydata['牛']" @change="checkboxChange" :disabled="continuousData.betArr.length > 10 && !moneydata['牛']"></label></td>
                <td class="caption_1">羊</td>
                <td><span class="blueBalls">04</span><span class="greenBalls">16</span><span class="greenBalls">28</span><span class="redBalls">40</span></td>
                <td><label class="flexbox"><input type="checkbox" name="checkboxtype" style="margin:5px auto;" v-model="moneydata['羊']" @change="checkboxChange" :disabled="continuousData.betArr.length > 10 && !moneydata['羊']"></label></td>
            </tr>
            <tr class="t_td_text">
                <td class="caption_1">虎</td>
                <td><span class="blueBalls">09</span><span class="greenBalls">21</span><span class="greenBalls">33</span><span class="redBalls">45</span></td>
                <td><label class="flexbox"><input type="checkbox" name="checkboxtype" style="margin:5px auto;" v-model="moneydata['虎']" @change="checkboxChange" :disabled="continuousData.betArr.length > 10 && !moneydata['虎']"></label></td>
                <td class="caption_1">猴</td>
                <td><span class="blueBalls">03</span><span class="blueBalls">15</span><span class="greenBalls">27</span><span class="greenBalls">39</span></td>
                <td><label class="flexbox"><input type="checkbox" name="checkboxtype" style="margin:5px auto;" v-model="moneydata['猴']" @change="checkboxChange" :disabled="continuousData.betArr.length > 10 && !moneydata['猴']"></label></td>
            </tr>
            <tr class="t_td_text">
                <td class="caption_1">兔</td>
                <td><span class="redBalls">08</span><span class="blueBalls">20</span><span class="greenBalls">32</span><span class="greenBalls">44</span></td>
                <td><label class="flexbox"><input type="checkbox" name="checkboxtype" style="margin:5px auto;" v-model="moneydata['兔']" @change="checkboxChange" :disabled="continuousData.betArr.length > 10 && !moneydata['兔']"></label></td>
                <td class="caption_1">鸡</td>
                <td><span class="redBalls">02</span><span class="blueBalls">14</span><span class="blueBalls">26</span><span class="greenBalls">38</span></td>
                <td><label class="flexbox"><input type="checkbox" name="checkboxtype" style="margin:5px auto;" v-model="moneydata['鸡']" @change="checkboxChange" :disabled="continuousData.betArr.length > 10 && !moneydata['鸡']"></label></td>
            </tr>
            <tr class="t_td_text">
                <td class="caption_1">龙</td>
                <td><span class="redBalls">07</span><span class="redBalls">19</span><span class="blueBalls">31</span><span class="greenBalls">43</span></td>
                <td><label class="flexbox"><input type="checkbox" name="checkboxtype" style="margin:5px auto;" v-model="moneydata['龙']" @change="checkboxChange" :disabled="continuousData.betArr.length > 10 && !moneydata['龙']"></label></td>
                <td class="caption_1">狗</td>
                <td><span class="redBalls">01</span><span class="redBalls">13</span><span class="blueBalls">25</span><span class="blueBalls">37</span><span class="greenBalls">49</span></td>
                <td><label class="flexbox"><input type="checkbox" name="checkboxtype" style="margin:5px auto;" v-model="moneydata['狗']" @change="checkboxChange" :disabled="continuousData.betArr.length > 10 && !moneydata['狗']"></label></td>
            </tr>
            <tr class="t_td_text">
                <td class="caption_1">蛇</td>
                <td><span class="greenBalls">06</span><span class="redBalls">18</span><span class="redBalls">30</span><span class="blueBalls">42</span></td>
                <td><label class="flexbox"><input type="checkbox" name="checkboxtype" style="margin:5px auto;" v-model="moneydata['蛇']" @change="checkboxChange" :disabled="continuousData.betArr.length > 10 && !moneydata['蛇']"></label></td>
                <td class="caption_1">猪</td>
                <td><span class="redBalls">12</span><span class="redBalls">24</span><span class="blueBalls">36</span><span class="blueBalls">48</span></td>
                <td><label class="flexbox"><input type="checkbox" name="checkboxtype" style="margin:5px auto;" v-model="moneydata['猪']" @change="checkboxChange" :disabled="continuousData.betArr.length > 10 && !moneydata['猪']"></label></td>
            </tr>
        </table>

    </div>
</template>

<script>

    var timer = null;
    import axios from 'axios'
    import {lotterytype} from '../../../../assets/js/lotterytype.js'
    export default {
        name: "LhcHx",
        props: {  //普通类型：String、Number、Boolean、Null    引用类型： Array、Object
            betmoney: {   //   下注金额
                type: String,
                required: true
            },
            resetinp: {   //   是否重填已下注金额  0为未下注  其他为已下注
                type: Number,
                required: true
            },
            openBet: {  //开奖  可下注
                type: Boolean,
                required: true
            },
            ninetime: {  //90s
                type: Number,
                required: true
            },
        },
        data(){
            return{
                ratedata: {},  //实时赔率
                params: {},  //菜单
                moneydata: {},
                betdataArr: [],  //下注 提交data
                nowitem: '',  //当前操作的下注item号
                arr: [],  //
                typetit: '合肖',
                odds: '--', 
                continuousData: {
                    betArr: [],  //下注数组
                    radioopt: 0,  //当前类别
                    betnowtype: 0,  //当前类别 赔率
                },
            }
        },
        methods: {
            init(){
                var _this = this;
                // console.log(this.$route.query);

                this.params = lotterytype.apiParams(this.$route.query.id,this.$route.query.levelid);

                if(window.localStorage.Authorization){
                    
                    _this.$httpGet('/api/game/listRate/'+ _this.params.nowlottery + '/' + _this.params.levellottery +'oa18').then(response => {
                        
                        if(response.status == 200){
                            _this.ratedata = response.data.rates;
                            // console.log(_this.ratedata);
                            _this.$emit('contBetFun',_this.continuousData);

                            if(response.data.need){
                                _this.$httpPost('/api/setting/rateItem/'+ _this.params.nowlottery + '/' + _this.params.levellottery +'oa18').then(response => {
                                
                                    if(response.status == 200){
                                        
                                    }

                                });
                            }
                        }

                    });
                }

            },
            inits(){
                var _this = this;
                // console.log(this.$route.query);

                this.params = lotterytype.apiParams(this.$route.query.id,this.$route.query.levelid);

                if(window.localStorage.Authorization){

                    if (timer) {
                        clearInterval(timer);
                        timer = null;
                    }

                    _this.$httpGet('/api/game/listRate/'+ _this.params.nowlottery + '/' + _this.params.levellottery +'oa18').then(response => {
                        
                        if(response.status == 200){
                            _this.ratedata = response.data.rates;
                            // console.log(_this.ratedata);
                            _this.$emit('contBetFun',_this.continuousData);

                            if(response.data.need){
                                _this.$httpPost('/api/setting/rateItem/'+ _this.params.nowlottery + '/' + _this.params.levellottery +'oa18').then(response => {
                                
                                    if(response.status == 200){
                                        
                                    }

                                });
                            }

                            timer = setInterval(() => {
                                _this.inits();
                            }, 10 * 1000)
                        }

                    });
                }

            },
            checkboxChange(item){

                this.continuousData.betArr = [];

                for (var index in this.moneydata){

                    if(this.moneydata[index]){
                        this.continuousData.betArr.push(index);
                    }

                }

                if(this.continuousData.betArr.length == 0 || this.continuousData.betArr.length == 1){
                    this.typetit = '合肖';
                    this.odds = '--';
                    this.continuousData.betnowtype = 0;
                }else if(this.continuousData.betArr.length == 2){
                    this.typetit = '二肖';
                    this.odds = this.ratedata['特码:合肖:二肖'];
                    this.continuousData.betnowtype = this.ratedata['特码:合肖:二肖'];
                }else if(this.continuousData.betArr.length == 3){
                    this.typetit = '三肖';
                    this.odds = this.ratedata['特码:合肖:三肖'];
                    this.continuousData.betnowtype = this.ratedata['特码:合肖:三肖'];
                }else if(this.continuousData.betArr.length == 4){
                    this.typetit = '四肖';
                    this.odds = this.ratedata['特码:合肖:四肖'];
                    this.continuousData.betnowtype = this.ratedata['特码:合肖:四肖'];
                }else if(this.continuousData.betArr.length == 5){
                    this.typetit = '五肖';
                    this.odds = this.ratedata['特码:合肖:五肖'];
                    this.continuousData.betnowtype = this.ratedata['特码:合肖:五肖'];
                }else if(this.continuousData.betArr.length == 6){
                    this.typetit = '六肖';
                    this.odds = this.ratedata['特码:合肖:六肖'];
                    this.continuousData.betnowtype = this.ratedata['特码:合肖:六肖'];
                }else if(this.continuousData.betArr.length == 7){
                    this.typetit = '七肖';
                    this.odds = this.ratedata['特码:合肖:七肖'];
                    this.continuousData.betnowtype = this.ratedata['特码:合肖:七肖'];
                }else if(this.continuousData.betArr.length == 8){
                    this.typetit = '八肖';
                    this.odds = this.ratedata['特码:合肖:八肖'];
                    this.continuousData.betnowtype = this.ratedata['特码:合肖:八肖'];
                }else if(this.continuousData.betArr.length == 9){
                    this.typetit = '九肖';
                    this.odds = this.ratedata['特码:合肖:九肖'];
                    this.continuousData.betnowtype = this.ratedata['特码:合肖:九肖'];
                }else if(this.continuousData.betArr.length == 10){
                    this.typetit = '十肖';
                    this.odds = this.ratedata['特码:合肖:十肖'];
                    this.continuousData.betnowtype = this.ratedata['特码:合肖:十肖'];
                }else if(this.continuousData.betArr.length == 11){
                    this.typetit = '十一肖';
                    this.odds = this.ratedata['特码:合肖:十一肖'];
                    this.continuousData.betnowtype = this.ratedata['特码:合肖:十一肖'];
                }
                console.log(this.continuousData);
                this.$emit('contBetFun',this.continuousData);

            },
            
        },
        mounted(){
            this.inits();
        },
        beforeDestroy(){
            clearInterval(timer);
        },
        watch :{
            resetinp: function(now,old){

                if(now != 0){   //重填下注金额

                    this.moneydata = {};  //清空所有下注金额
                    this.betdataArr = [];
                    this.arr = [];
                    
                }
            },
            openBet: function(now,old){
                console.log(now,old);
                this.init();
            },
            ninetime: function(now,old){
                console.log('------------90s  刷新');
                //90s  刷新数据
                this.init();
            },
        },
    }
</script>
